<template>
	<view class="modal">
		<view class="modal-container">
			<view class="modal-header">
				<view class="modal-title">注册</view>
				<view class="modal-close-btn" @click="closeModal">
					<uni-icons type="closeempty" size="20"></uni-icons>
				</view>
			</view>
			<view class="modal-content">
				<u--form :model="form" ref="uForm" :rules="rules">
					<u-form-item label="账户" prop="username">
						<u-input v-model="form.username" clearable/>
					</u-form-item>
					<u-form-item label="密码" prop="password">
						<u-input type="password" v-model="form.password" />
					</u-form-item>
					<u-form-item label="确认密码" prop="repassword">
						<u-input type="password" v-model="form.repassword" />
					</u-form-item>
					<u-form-item label="邮箱" prop="email">
						<u-input v-model="form.email" clearable/>
					</u-form-item>
				</u--form>
			</view>
			<view class="modal-footer">
				<view class="modal-actions">
					<view class="modal-action">
						<button class="button-icon-button button-border clickable" role="button" @click="submit">
							<view class="button-icon-button-icon false">
								<uni-icons type="checkmarkempty" size="20"></uni-icons>
							</view>
							<view class="button-icon-button-text">注册</view>
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		emits: ["closeModal"],
		props: {},
		data() {
			return {
				form: {
					username: "",
					password: "",
					repassword: "",
					email: "",
				},
				rules: {
					username: [
						{
							required: true,
							min: 6,
							max: 25,
							message: '账户长度在6-25个字符之间',
							trigger: ['blur', 'change']
						}
					],
					password: [
						{
							required: true,
							min: 6,
							max: 25,
							message: '密码长度在6-25个字符之间',
							trigger: ['blur', 'change']
						}
					],
					repassword: [
						{
							required: true,
							message: '请输入确认密码',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								// 返回true表示校验通过，返回false表示不通过
								if(value == this.form.password){
									return true;
								}
								return false;
							},
							message: '两次密码不一致',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					email: [
						{
							required: true,
							message: '请输入邮箱',
							trigger: ['blur', 'change']
						},
						{
							type: 'email',
							message: '邮箱格式不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					]
				}
			}
		},
		methods: {
			closeModal() {
				this.$emit("closeModal");
			},
			submit() {
				let $_this = this;
				this.$refs.uForm.validate().then(res => {
					uni.$u.http.api.register(this.form).then(data => {
						// console.log(data)
						if(data.code == 1){
							uni.$u.toast(data.msg);
							uni.$u.sleep(1000).then(() => {
								$_this.closeModal()
							});
						} else {
							uni.$u.toast(data.msg);
						}
					}).catch(err => {
						console.log(err)
						uni.$u.toast('请求出错')
					})
				}).catch(errors => {
					console.log(errors)
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style lang="scss">

@import "../css/chat.scss";

.modal {
	z-index: 9999;
	position: fixed;
	top: 0;
	left: 0;
	height: var(--full-height);
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-container {

	/* color */
	--white: white;
	--black: rgb(48, 48, 48);
	--gray: rgb(250, 250, 250);
	--primary: rgb(29, 147, 171);
	--second: rgb(231, 248, 255);
	--hover-color: #f3f3f3;
	--bar-color: rgba(0, 0, 0, 0.1);
	--theme-color: var(--gray);

	/* shadow */
	--shadow: 50px 50px 100px 10px rgb(0, 0, 0, 0.1);
	--card-shadow: 0px 2px 4px 0px rgb(0, 0, 0, 0.05);

	/* stroke */
	--border-in-light: 1px solid rgb(222, 222, 222);

	box-shadow: var(--card-shadow);
	background-color: var(--white);
	border-radius: 12px;
	width: 40vw;
	// 匹配移动设备
	@media (max-width: 767px) {
	  // 这里写移动设备的 CSS 样式
	  width: 80vw
	}
	max-width: calc(var(--container-max-width) * 0.5);
	animation: slide-in ease 0.3s;

	--modal-padding: 20px;

	.modal-header {
		padding: var(--modal-padding);
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: var(--border-in-light);

		.modal-title {
			font-weight: bolder;
			font-size: 16px;
		}

		.modal-close-btn {
			cursor: pointer;

			&:hover {
				filter: brightness(1.2);
			}
		}
	}

	.modal-content {
		max-height: 40vh;
		padding: var(--modal-padding);
		overflow: auto;
	}

	.modal-footer {
		padding: var(--modal-padding);
		display: flex;
		justify-content: flex-end;
		border-top: var(--border-in-light);
		box-shadow: var(--shadow);

		.modal-actions {
			display: flex;
			align-items: center;

			.modal-action {
				&:not(:last-child) {
					margin-right: 20px;
				}
			}
		}
	}
}


</style>
